<template>
  <div>
    <!-- 
      侦听器 watch
        1.更加灵活、通用
        2.watch 中可以执行任何逻辑，如 函数节流、Ajax 异步获取数据、甚至操作 DOM
    -->
    <!-- 
      computed vs watch
        1.computed 能做的，watch 都能做，反之则不行
        2.能用 computed 的尽量用 computed
    -->
    {{ $data }}
    <br />
    <button @click="() => (a += 1)">a+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: { c: 2, d: 3 },
      e: { f: { g: 4 } },
      h: [],
    };
  },
  watch: {
    a: function (val, ordVal) {
      this.b.c += 1;
      console.log("new %s, ord %s", val, ordVal);
    },
    "b.c": function (val, ordVal) {
      this.b.d += 1;
      console.log("new %s, ord %s", val, ordVal);
    },
    "b.d": function (val, ordVal) {
      this.e.f.g += 1;
      console.log("new %s, ord %s", val, ordVal);
    },
    e: {
      handler: function (val, ordVal) {
        this.h.push("😘");
        console.log("new %s, ord %s", val, ordVal);
      },
      deep: true,
    },
    h(val, ordVal) {
      console.log("new %s, ord %s", val, ordVal);
    },
  },
};
</script>
